<template>
    <div class="category">
        <div class="category-list">
            <van-sidebar v-model="activeCategory" @change="changeHandler">
                <van-sidebar-item v-for="item, index in categoryList" :key="index"
                    :title="(item as unknown as string).trim()" />
            </van-sidebar>
        </div>
        <div class="category-brand">
            <van-grid :column-num="2" square :gutter="10">
                <van-grid-item v-for="item,index in brandList" :key="index"  icon="photo-o" :text="(item as any).brand" />
            </van-grid>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { Ref } from 'vue';
import { ref, reactive,computed, onMounted,watchEffect } from 'vue';
import { getCategoryListAPI , getBrandListAPI} from "@/api/product";
// import { showSuccessToast,showFailToast } from 'vant';

let activeCategory = ref(0);
let categoryList = ref([]);
let brandList = ref([]);

let currCategory  = computed(()=>{
    return  categoryList.value ? categoryList.value[activeCategory.value]:null;
})


const getCategoryList = async () => {
    try {
        let result = await getCategoryListAPI();
        console.log("分类列表请求成功", result);
        categoryList.value = result.data;

    } catch (err: any) {
        // showFailToast(err.message);
    }
}
const getBrandList = async () => {
    try {
        let result = await getBrandListAPI({
            category:currCategory.value
        });
        console.log("某个分类下的品牌列表请求成功",currCategory.value, result);
        brandList.value = result.data;

    } catch (err: any) {
        // showFailToast(err.message);
    }
}

const changeHandler = async ()=>{
    await getBrandList();
}


onMounted(async () => {
    await getCategoryList();
    await getBrandList();
})

// watchEffect(async ()=>{
//     await getCategoryList();
//     await getBrandList();
// })



</script>

<style lang="scss" scoped>
.category {
    width: 100%;

    display: flex;

    .category-list {
        overflow-y: auto;
    }

    .category-brand {
        flex: 1;
        overflow-y: auto;
    }




}
</style>